<template>
  <div class="login">
    <div class="content">
      <img src="../../../static/index/bg.jpg" alt>
      <div class="form">
        <div class="header">
          <img src="../../../static/login/u1311.png" alt>
          <div class="header-2">
            <img src="../../../static/login/u1312.png" alt>
          </div>
        </div>
        <p>工程管家业务管理系统</p>
        <!-- 表单 -->
        <el-form
          label-width="50px"
          class="demo-ruleForm loginValiy"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item prop="username" class="input-person">
            <el-input v-model="ruleForm.username" autocomplete="off" placeholder="用户名">
              <el-button slot="prepend" icon="el-icon-lx-people">
                <span class="iconfont" style="font-size:25px;vertical-align: middle;">&#xe645;</span>
              </el-button>
            </el-input>
          </el-form-item>

          <el-form-item prop="password" class="input-person">
            <el-input
              type="password"
              v-model="ruleForm.password"
              placeholder="密码"
              @keyup.enter.native="submitForm('ruleForm')"
            >
              <el-button slot="prepend" icon="el-icon-lx-lock">
                <span class="iconfont" style="font-size:25px;vertical-align: middle;">&#xe657;</span>
              </el-button>
            </el-input>
          </el-form-item>
          <!--<el-form-item class="codeVaily" prop="imgCode">
            <div class="imgCode">
              <el-input v-model="ruleForm.imgCode" placeholder="请输入图片验证码"  @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </div>
            <div class="code" @click="refreshCode">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </div>
          </el-form-item>-->
          <el-form-item class="input-person">
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { checkUser } from "@/api";
import ElFormItem from "../../../node_modules/element-ui/packages/form/src/form-item";
import SIdentify from "./identify";
export default {
  components: {ElFormItem,SIdentify},
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        imgCode:""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        imgCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      userId:'',
      identifyCodes: "1234567890",
      identifyCode: ""
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate(valid => {
        if (valid){
          that.login();
        }
        /*if (valid) {
            if(this.ruleForm.imgCode == this.identifyCode){
              that.login();
            }else{
              this.$alert('验证码错误', '提示', {
                confirmButtonText: '确定',
              });
            }
        } else {
          console.log("error submit!!");
          return false;
        }*/
      });
    },
    login(){
      localStorage.clear();
      let that = this;
      let suCb = function(res){
        that.userId = res.data.data.userId;
        localStorage.setItem("ms_username", res.data.data.userName);
        localStorage.setItem("flags", 0);
        localStorage.setItem("ms_userId",res.data.data.userId)
        localStorage.setItem("roleName",res.data.data.roleCode)
        localStorage.setItem("token",res.data.token)
        if(res.data.data.roleCode == 'WorkTeamLeader'){
          that.$alert('暂未对施工队开放', '提示', {
            confirmButtonText: '确定',
          });
        }else{
          that.limit();
        };

      }
      let erCb = function(res){
        console.log(res)
        that.$alert('用户名或密码错误', '提示', {
          confirmButtonText: '确定',
        });
      }
      let postData = {
         name:that.ruleForm.username,
         pwd:""
      }
      let palyParam = {
        url: "/api/web/sysUser/checkLogin",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      let pwd  = that.deepClone(that.ruleForm);
      palyParam.data.pwd = that.$md5(pwd.password)
      console.log(palyParam.data.pwd)
      that.$https(palyParam)
    },
    limit(){
      let that = this;
      let suCb = res => {
          localStorage.setItem("ms_limit", JSON.stringify(res.data.data));
          that.$msg('登录成功')
          if(localStorage.getItem('roleName') == 'ProjectStayPointClerk'){
            that.$router.push({name:'moveProjectList'})
          }else{
            that.$router.push("/system")
          }
        },
        erCb = res => {
          console.log(res)
        },
        req = {
          url:"/api/web/sysUser/getUserAuthoritys",
          methods:"post",
          data:{userId:that.userId},
          success:suCb,
          error:erCb
        }
      that.$https(req)
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
          ];
      }
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.content {
  width: 100%;
  position: absolute;
  left: 0;
  top: 25%;
}
.content img {
  width: 100%;
  height: 240px;
}
.form {
  position: absolute;
  width: 350px;
  height: 420px;
  box-sizing: border-box;
  background-color: #fff;
  top: 50%;
  left: 50%;
  margin-left: -185px;
  margin-top: -210px;
  border-top: 10px solid #1abc9c;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);;
}
.header {
  margin-top: 30px;
}

.form .header img {
  width: 60px;
  height: 70px;
}

.form .header-2 img {
  width: 40px;
  height: 30px;
}

.form .header-2 {
  position: absolute;
  left: 44%;
  top: 11%;
  transform: translatX(-50%, -50%);
}
.content p {
  font-size: 25px;
  font-weight: 700;
  color: #1abc9c;
}

.el-button--primary {
  width: 250px;
  height: 50px;
  background-color: #1abc9c;
}
.demo-ruleForm {
  margin-top: 20px;
  margin-right: 20px;
  position: relative;
}

.input-person {
  margin-top: 20px;
}

.input-img {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0px;
  left: -30px;
}
.codeVaily{
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}
.imgCode{
  width: 150px;
  float: left;
}
.code {
  width: 114px;
  height: 40px;
  float: right;
}

</style>
